<template>
	<view class="page w-full bg-fffbf4 flex flex-col" style="min-height: 100vh;">
		<view class="navBar w-full pl-30 pt-40 z-9999 t-0">
			<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
				姓氏源流
				<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
			</view>
		</view>

		<view class="pl-30 pr-30 w-full flex-1">
			<view class="w-610 m-auto h-360 radius-24 bg-danger mt-60 overflow-hidden">
				<video :src="detail.videoUrl" :poster="VideoPost" class="w-full h-full"></video>
			</view>

			<view class="sound flex-center text-581403 f-24 mt-40" @click="playAudio">
				<image src="/src/static/icon-11.png" class="w-28 h-28 mr-6"></image>
				朗读
			</view>
			<view class="mt-40" v-html="detail.content"></view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad, onHide } from '@dcloudio/uni-app';
	import VideoPost from '@/static/video-post.jpg'

	const { api_get_surnNameOrigin } = useRequest();
	const detail = ref('')

	const loadDetail = () => {
		api_get_surnNameOrigin().then(res => {
			detail.value = res
			initAudio()
		})
	}

	// 播放控制
	const isPlaying = ref(false)
	const innerAudioContext = ref(null)

	function initAudio() {
		// 创建音频实例
		innerAudioContext.value = uni.createInnerAudioContext();

		// 监听播放事件
		innerAudioContext.value.onPlay(() => {
			isPlaying.value = true
			console.log('开始播放')
		})

		// 监听暂停事件
		innerAudioContext.value.onPause(() => {
			isPlaying.value = false
			console.log('已暂停')
		})

		// 监听暂停事件
		innerAudioContext.value.onError((res) => {
			uni.showToast({
				title: `播放错误：${res?.errCode}`,
				icon: 'none'
			})
		})
	}

	function playAudio() {
		if (!innerAudioContext.value) return
		// 设置音频源（支持本地和网络路径）
		innerAudioContext.value.src = detail.value.audioUrl;
		isPlaying.value ? innerAudioContext.value.pause() : innerAudioContext.value.play()
	}

	onLoad(() => {
		loadDetail()
	})

	onUnload(() => {
		innerAudioContext.value.pause()
	})

	onHide(() => {
		innerAudioContext.value?.destroy();
	})
</script>

<style lang="scss" scoped>
	.sound {
		width: 128rpx;
		height: 56rpx;
		background-image: url('/src/static/bg-07.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
</style>